<template>
  <div class="card-body">
    <!--下拉菜单选项-->
    <div class="border-bottom pb-4">
      <div class="row ml-1 pb-3">
        <!--        闲置物品类型-->
        <div id="col_ifdeal" class="pr-3">
          <span class="" style="font-size: 18px">交易情况：</span>
          <el-cascader
              size="large"
              :options="options_deal"
              v-model="selectDeal"
              placeholder="选择闲置物品交易情况..."
              clearable
              filterable>
          </el-cascader>
        </div>
        <!--        闲置物品类型-->
        <div id="col_type" class="pr-3">
          <span class="" style="font-size: 18px">闲置物品类别：</span>
          <el-cascader
              size="large"
              :options="options_type"
              v-model="selectType"
              placeholder="选择闲置物品类别..."
              clearable
              filterable>
          </el-cascader>
        </div>
        <!--        科目-->
        <div id="province">
          <span class="" style="font-size: 18px">科目：</span>
          <el-cascader
              size="large"
              :options="options_subject"
              v-model="selectSub"
              placeholder="选择科目..."
              clearable
              filterable>
          </el-cascader>
        </div>
        <span class="input-group-btn pl-3">
<!--              <button class="btn btn-outline-info" type="button" @click="FindFile()" style="width: 100px">搜&nbsp;&nbsp;索</button>-->
            <el-button type="" icon="el-icon-search" @click="findBySelect()" size="large">搜索</el-button>
            <el-button type="" @click="clearSelect()" size="large">重置</el-button>
          </span>
      </div>
      <!--    搜索框-->
      <div class="row mt-2">
        <div class="col-md-7 input-group">
          <el-input
              size="large"
              placeholder="请输入闲置物品名..."
              v-model="find_idle"
              clearable
              @keyup.enter.native="findByName">
          </el-input>
        </div>
        <div class="col-md-5">
              <span class="input-group-btn">
                <el-button type="" icon="el-icon-search" @click="findByName()" size="large">搜索</el-button>
              </span>
          <span class="pl-3">
                <el-button type="" @click="clearInput()" size="large">重置</el-button>
          </span>
        </div>
      </div>
    </div>
<!--    主体信息-->
    <div class="panel panel-default" >
      <!-- Default panel contents -->
      <div class="panel-body">
        <!-- 文件项 -->
        <div class="row" v-if="idle_info.length>0" >
          <div class="col-lg-3 col-md-4 col-sm-6 col-xs-12 p-2" v-for="(idle) in idle_info" :key=idle.idle_item_id>
            <div class="thumbnail">
              <el-tag v-if="idle.idle_item_ifdeal==1" type="danger">交易中</el-tag>
              <el-tag v-else-if="idle.idle_item_ifdeal==2" type="success">已交易</el-tag>
              <el-tag v-else-if="idle.idle_item_ifdeal==3" type="warning">可交易</el-tag>
              <div class="imgHeight">
                <img :src="'/api/storage/idle_img/'+idle.idle_item_img"
                     v-if="idle.idle_item_img=='default_idle_img.jpg'"
                     style="width:100%;height:95%;object-fit:contain;border-color: black"
                     alt="...">
                <img :src="'/api/storage/idle_img/'+idle.user_id+'/'+idle.idle_item_img"
                     v-else
                     style="width:100%;height:95%;object-fit:contain;border-color: black"
                     alt="...">
              </div>
              <div class="caption">
                <div style="text-align: center;color: #6b6e71" class="capChild">
                  <a class="name" style="font-weight: bold;font-size: 20px;" href="javascript:void(0);" @click="one_idle(idle)">{{idle.idle_item_name}}</a>
                  <div class="mb-3 mt-2">
                    <span style="color: black">价格：</span><span>{{idle.idle_item_price}}元</span>

                    <span style="color: black"><br/>类别：</span>
                    <span v-if="idle.idle_item_category==1">考研笔记</span>
                    <span v-else-if="idle.idle_item_category==2">书籍</span>
                    <span v-else-if="idle.idle_item_category==3">文具</span>
                    <span v-else-if="idle.idle_item_category==4">考卷</span>
                    <span v-else-if="idle.idle_item_category==5">其他</span>

                    <span class="pt-2" style="color: black"><br/>科目：</span>
                    <span v-if="idle.idle_item_subject==1">英语</span>
                    <span v-else-if="idle.idle_item_subject==2">数学</span>
                    <span v-else-if="idle.idle_item_subject==3">政治</span>
                    <span v-else-if="idle.idle_item_subject==4">专业</span>
                    <span v-else-if="idle.idle_item_subject==5">其他</span>

                    <span class="pt-2" style="color: black"><br/>新旧程度：</span>
                    <span v-if="idle.idle_item_degree==1">全新</span>
                    <span v-else-if="idle.idle_item_degree==2">9成新</span>
                    <span v-else-if="idle.idle_item_degree==3">5成新</span>
                    <span v-else-if="idle.idle_item_degree==4">使用过</span>
                    <span v-else-if="idle.idle_item_degree==5">破旧点</span>

                  </div>
                  <!--                    按钮-->
<!--                  <el-button @click="one_idle(idle)" plain type="warning">详细信息</el-button>-->
                  <el-button @click="idle_comment(idle)" type="primary" plain>发表评论</el-button>
                  <el-button type="danger" style="margin-left: 16px;" @click="openDrawer(idle)" plain>
                    <i class="fa fa-heart-o pr-2"></i>我想要
                  </el-button>

<!--                  我想要的侧边聊天框 -->
                  <el-drawer
                      title="我是标题"
                      :with-header="false"
                      :visible.sync="drawer"
                      :direction="direction"
                      :before-close="handleClose_Drawer">
                    <h2 class="text-center pt-3" style="color:#343a40;font-weight: bold">
                      闲置物品交易
                    </h2>
                    <div class="mt-5 ml-3">
                      <el-form :model="drawer_dialog_form"
                               ref="drawer_dialog_form"
                               label-width="120px"
                               class="drawer_dialog_form"
                               style="padding-right: 20px"
                               status-icon>

                        <el-form-item label="卖家名称：" label-width="110px" prop="sale_user_name">
                          <span slot="label" class="drawerfontclass">卖家名称：</span>
                          <el-input v-model="drawer_dialog_form.sale_user_name"
                                    type="text" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="闲置物品名：" label-width="110px" prop="idle_item_name">
                          <span slot="label" class="drawerfontclass">闲置物品名：</span>
                          <el-input v-model="drawer_dialog_form.idle_item_name"
                                    type="text" readonly></el-input>
                        </el-form-item>

                        <el-form-item label="备注：" label-width="110px" prop="deal_to_user_remark">
                          <span slot="label" class="drawerfontclass">备注：</span>
                          <el-input v-model="drawer_dialog_form.deal_to_user_remark"
                                    maxlength="100"
                                    autocomplete="off"
                                    show-word-limit
                                    :rows="4"
                                    type="textarea"></el-input>
                          <small>可留下联系方式给卖家~</small>
                        </el-form-item>

                        <el-form-item>
                          <el-button type="primary" @click="submitDealForm" plain>发 起 交 易</el-button>
                          <el-button type="warning" @click="clearDealForm" plain>重 置</el-button>
                        </el-form-item>



                      </el-form>

                    </div>








                  </el-drawer>

<!--                  详细信息的弹窗-->
                  <el-dialog
                      title="详细信息"
                      :visible.sync="dialogVisible"
                      width="60%"
                      :dialog_idle="dialog_idle"
                  >

<!--                    弹出框消息-->
                    <div class="dialog_main border-top pt-3">
                      <div class="dialog_info border-bottom">
                        <div class="imgHeight">
                          <img style="width:100%;height:95%;object-fit:contain;"  alt="..." :src="'/api/storage/idle_img/'+dialog_idle.idle_item_img"
                               v-if="dialog_idle.idle_item_img=='default_idle_img.jpg'" >
                          <img :src="'/api/storage/idle_img/'+dialog_idle.user_id+'/'+dialog_idle.idle_item_img"
                               style="width:100%;height:95%;object-fit:contain;"  alt="..."
                               v-else>
                        </div>
                        <div class="dialog_info_span">
                          <div class="dialog_title" style="color: black"><h5 class="text-center" style="font-size: 25px">{{ dialog_idle.idle_item_name }}</h5></div>
                          <div class="" align="center">

                            <div class="info_span row pl-5 pt-2">
                              <span style="color: black">价格：</span><span>{{dialog_idle.idle_item_price}}元</span>
                            </div>

                            <div class="info_span row pl-5">
                              <span class="" style="color: black">类别：</span>
                              <span v-if="dialog_idle.idle_item_category==1">考研笔记</span>
                              <span v-else-if="dialog_idle.idle_item_category==2">书籍</span>
                              <span v-else-if="dialog_idle.idle_item_category==3">文具</span>
                              <span v-else-if="dialog_idle.idle_item_category==4">考卷</span>
                              <span v-else-if="dialog_idle.idle_item_category==5">其他</span>
                            </div>

                            <div class="info_span row pl-5">
                              <span class="" style="color: black">科目：</span>
                              <span v-if="dialog_idle.idle_item_subject==1">英语</span>
                              <span v-else-if="dialog_idle.idle_item_subject==2">数学</span>
                              <span v-else-if="dialog_idle.idle_item_subject==3">政治</span>
                              <span v-else-if="dialog_idle.idle_item_subject==4">专业</span>
                              <span v-else-if="dialog_idle.idle_item_subject==5">其他</span>
                            </div>

                            <div class="info_span row pl-5">
                              <span class="" style="color: black">新旧程度：</span>
                              <span v-if="dialog_idle.idle_item_degree==1">全新</span>
                              <span v-else-if="dialog_idle.idle_item_degree==2">9成新</span>
                              <span v-else-if="dialog_idle.idle_item_degree==3">5成新</span>
                              <span v-else-if="dialog_idle.idle_item_degree==4">使用过</span>
                              <span v-else-if="dialog_idle.idle_item_degree==5">破旧点</span>
                            </div>


                            <div class="info_span row pl-5 pr-5">
                              <span style="color: black">描述：</span>
                              <span>{{dialog_idle.idle_item_info}}</span>
                            </div>

                            <div class="row pl-5 pt-3" style="color: black">
                              <p style="font-size: 18px">
                                <i class="fa fa-user pr-1" aria-hidden="true"></i>
                                发布者：{{dialog_idle.user_name}}
                                &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
                              </p>
                              <p style="font-size: 18px">
                                <i class="fa fa-clock-o pr-1" aria-hidden="true" ></i>更新时间：{{dialog_idle.idle_item_time}}
                              </p>
                            </div>

                          </div>

                        </div>
                      </div>
<!--                      评论-->
                      <div class="dialog_comment">

                      </div>
                    </div>
<!--                    按钮-->
                    <span slot="footer" class="dialog-footer">
                      <el-button type="primary" @click="dialogVisible = false" plain>确 定</el-button>
                      <el-button @click="dialogVisible = false">取 消</el-button>
                    </span>
                  </el-dialog>

<!--                  评论的弹窗-->
                  <el-dialog
                      title="发表评论"
                      :visible.sync="CommentVisible"
                      width="50%"
                      @close="handleClose">
                      <el-input v-model="CommentForm.comment_content"
                                  type="textarea"
                                  maxlength="100"
                                  autocomplete="off"
                                  show-word-limit
                                  placeholder="请输入评论，1-100个字符..."></el-input>
                    <div class="pt-3">
                        <el-button type="primary" @click="submitForm()">发 表</el-button>
                        <el-button @click="resetForm('CommentForm')">重置</el-button>
                        <el-button @click="cancel()">取 消</el-button>
                    </div>
                    <!--                  其他评论内容-->
                    <div class="comment_main pt-3">
                      <div class="">
                        <ul class="list-group">
                          <li class="row border-bottom pb-3 pt-3" v-for="item in comment_info" :key="item.idle_comment_id">
                            <div class="col-md-8" align="left">
                              <span style="color: #0f5da2;font-size: 15px;font-weight: bold">评论人：{{item.user_name}}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
                              <span class="pt-2">{{item.idle_comment_content}}</span>
                            </div>
                            <div class="col-md-4" align="right" style="color: black">发布于 {{item.idle_comment_time}}</div>
                          </li>
                        </ul>
                        <div class="pt-4">
                          <el-pagination
                              @size-change="handleSizeChange_com"
                              @current-change="handleCurrentChange_com"
                              :current-page.sync="currentPage_com"
                              :page-size="param_com.limit_com"
                              layout="total,prev, pager, next"
                              :total="comment_total">
                          </el-pagination>
                        </div>
                      </div>

                    </div>


                  </el-dialog>



                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="noFile" v-else>
          <img :src="imgs.noInfo" alt="...">
          <h2>{{this.nullContainer}}</h2>
        </div>
      </div>

      <!--         分页 -->
      <div class="mt-4 mb-4 panel-footer" style="text-align:center;" v-show="idle_info.length>0">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[1, 2,5,10]"
            :page-size="param.limit"
            layout="total, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>

    </div>




  </div>
</template>

<script>
import noInfo from '@/assets/noFile.png'
import {getAllIdleInfo,getCommentInfoByIdleID,addComment} from '@/api/Resale'
import {getUser_Basic} from "@/api/User";
import {addDeal} from '@/api/Deal';
import websocket from "@/utils/websocket";



export default {
  name: "all_resale",
  data(){
    return{
      //抽屉  弹出框
      drawer: false,
      direction: 'rtl',
      drawer_dialog:[],
      drawer_dialog_form:{
        sale_user_id:'',
        sale_user_name:'',
        deal_to_user_remark:'',
        idle_item_id: '',
        idle_item_name:'',
      },
      now_user_id:'',  //当前登录用户id
      imgs:{
        noInfo
      },
      //分页
      currentPage:1,
      param: {
        page: 1,
        limit: 12,
      },
      total:0,
      idle_info:[],
      //  搜索功能
      find_idle:'',
      //多级联选
      selectDeal:0,
      options_deal:[
        {
          id:"1",
          label:"交易中",
          value:1,
        },
        {
          id:"2",
          label:"已交易",
          value:2,
        },
        {
          id:"3",
          label:"可交易",
          value:3,
        },
      ],
      options_type:[
        {
          id:"1",
          label:"考研笔记",
          value:1,
        },
        {
          id:"2",
          label:"书籍",
          value:2,
        },
        {
          id:"3",
          label:"文具",
          value:3,
        },
        {
          id:"4",
          label:"考卷",
          value:4,
        },
        {
          id:"5",
          label:"其他",
          value:5,
        }
      ],
      selectType:0,
      options_subject:[
        {
          id:"1",
          label:"英语",
          value:1,
        },
        {
          id:"2",
          label:"数学",
          value:2,
        },
        {
          id:"3",
          label:"政治",
          value:3,
        },
        {
          id:"4",
          label:"专业",
          value:4,
        },
        {
          id:"5",
          label:"其他",
          value:5,
        },
      ],
      selectSub:0,
      //查看详细信息弹窗
      dialogVisible:false,
      dialog_idle:[],
    //  查看评论弹窗
      CommentVisible:false,
      CommentForm:{
        comment_content:'',
      },
      formLabelWidth:'120px',
      comment_info:[],
      comment_total:0,
      currentPage_com:1,
      param_com:{
        page_com:1,
        limit_com:5,
      },
      idle:[],
      code:0,
      nullContainer:"暂无数据~",
      ifcheck:'',



    }
  },
  methods:{
    //清空备注
    clearDealForm(){
      this.drawer_dialog_form.deal_to_user_remark="";
    },
    //提交交易
    submitDealForm(){
      if(this.drawer_dialog_form.deal_to_user_remark.length > 100){
        this.$message.warning("备注不得超过100字！");
        return;
      }

      addDeal({
        sale_user_id:this.drawer_dialog_form.sale_user_id,
        idle_item_id:this.drawer_dialog_form.idle_item_id,
        deal_to_user_remark:this.drawer_dialog_form.deal_to_user_remark,
      }).then(res=>{
        if(res.data.code==1){
          this.$message.success("成功发起交易，请等待卖家联系！");
          let ws = websocket.getWebSocket();
          ws.send(JSON.stringify({type:"flush"}));
        }
        else{
          this.$message.error("发起交易失败！");
          this.initAllDeal();
        }
        this.drawer=false;
        this.drawer_dialog_form.deal_to_user_remark="";
      });


    },
    openDrawer(idle){
      if(this.ifcheck!=1 ){
        this.$msg.error("未通过身份审核不可发起交易！");
        return false;
      }
      //判断该闲置物品是否在交易中
      this.drawer_dialog_form.idle_item_ifdeal=idle.idle_item_ifdeal;
      if(this.drawer_dialog_form.idle_item_ifdeal==1){
        this.$message.error("该闲置物品正在交易中！");
        return;
      }
      if(this.drawer_dialog_form.idle_item_ifdeal==2){
        this.$message.error("该闲置物品已卖出！");
        return;
      }
      //判断该闲置物品是否是用户自己发布的
      this.drawer_dialog_form.idle_item_id=idle.idle_item_id;
      this.drawer_dialog_form.sale_user_id=idle.user_id;
      if(this.now_user_id == this.drawer_dialog_form.sale_user_id){
        this.$message.error("不可对自己发布的闲置物品发起交易");
        return;
      }
      //发起交易
      this.drawer=true;
      this.drawer_dialog_form.sale_user_name=idle.user_name;
      this.drawer_dialog_form.idle_item_name=idle.idle_item_name;

    },
    handleClose_Drawer(done) {
      this.drawer_dialog_form.deal_to_user_remark="";
      done();
    },
    //获取当前登录用户信息
    init_user_basic(){
      getUser_Basic({
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        this.ifcheck=res.data.ifcheck;
        this.now_user_id=res.data.user_id;
      });
    },
    //获取所有闲置物品信息
    async initAllDeal(){
      getAllIdleInfo({
        // token:window.sessionStorage.getItem('token')
        page:this.param.page,
        limit: this.param.limit,
        idle_item_subject:this.selectSub[0],
        idle_item_category:this.selectType[0],
        idle_item_ifdeal:this.selectDeal[0],
        idle_item_name: this.find_idle,
      }).then(res=>{
          this.idle_info=res.data.data;
          this.total=res.data.total;
      });
    },
    //根据闲置物品名称搜索功能
    findByName(){
      var search=this.find_idle;
      if(search==""||search==null)
      {
        this.$msg.error('输入框不能为空！');
        return;
      }
      this.initAllDeal();
      this.find_idle="";
    },
    //搜索一页多少条
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.param.limit=val;
      this.initAllDeal();
    },
    //搜索第几页
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.param.page=val;
      this.initAllDeal();
    },
    //清空多级联框
    clearSelect(){
      this.selectType="";
      this.selectSub="";
      this.selectDeal="";
      this.initAllDeal();
    },
    // 清空搜索框
    clearInput(){
      //清空搜索框
      this.find_idle="";
      this.initAllDeal();
    },
    //根据闲置物品类别和科目搜索
    findBySelect(){
      this.find_idle="";
      if(this.selectSub==0&&this.selectType==0&&this.selectDeal==0){
        this.$msg.error('请选择闲置物品类型或所属科目或交易情况！');
        return;
      }
      this.initAllDeal();
      this.selectType="";
      this.selectSub="";
      this.selectDeal="";
    },
    //跳转 查看详细信息
    one_idle(idle){
      this.dialogVisible= true;
      this.dialog_idle=idle;
    },
    //显示评论和发表评论的弹窗
    idle_comment(idle){

      this.CommentVisible=true;
      this.idle=idle;
      // console.log(idle);
      this.getComment();

    },
    //获取评论
    getComment(){

      getCommentInfoByIdleID({
        idle_item_id:this.idle.idle_item_id,
        page:this.param_com.page_com,
        limit:this.param_com.limit_com,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
          this.comment_info=res.data.data;
          this.comment_total=res.data.total;
      })

    },
    //  清空发布的弹窗的内容 重置
    resetForm() {
      this.CommentForm.comment_content="";
    },
    //  关闭弹窗
    cancel() {
      this.CommentVisible = false
      this.CommentForm.comment_content="";
    },
    // 右上角 × 取消按钮
    closeDiv() {
      this.CommentForm.comment_content="";
    },
    handleClose(){
      this.CommentForm.comment_content="";
    },
    //发布评论
    submitForm() {

      if(this.ifcheck!=1 ){

        this.$msg.error("未通过身份审核不可发表评论！");
        return false;
      }

      if(this.CommentForm.comment_content.length>=100){
        this.$msg.error("评论内容不能超过100字符！");
        return false;
      }
      if (this.CommentForm.comment_content.length!=0) {

        //再次确认
        this.$confirm('确认发表?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {

          this.addcomment();

        }).catch(() => {
          this.$msg.error("发表失败！");
        });

      } else {
        this.$msg.error("请输入内容，不能为空哦！");
        return false;
      }


    },
    addcomment(){

      addComment({
        idle_item_id:this.idle.idle_item_id,
        idle_comment_content:this.CommentForm.comment_content,
        // token:window.sessionStorage.getItem('token')
      }).then(res=>{
        if(res.data.code==1){
          this.$msg.success("发表成功！");
        }else{
          this.$msg.error("发表失败！");
        }
        this.cancel();
      });


    },
    handleSizeChange_com(val) {
      console.log(`每页 ${val} 条`);
      this.param_com.limit_com=val;
      this.getComment();

    },
    handleCurrentChange_com(val) {
      console.log(`当前页: ${val}`);
      this.param_com.page_com=val;
      this.getComment();

    },



  },
  mounted() {
    window.AllDeal=this.initAllDeal;
  },
  created() {
    let _this=this;

    _this.initAllDeal();
    _this.init_user_basic();
  },


}
</script>

<style scoped>
.el-pagination {
  text-align: center;
}
.noFile{
  padding-top: 200px;
  margin: 0px auto;
  text-align: center;
  font-size: 50px;
  color: #6b6e71;
}
.panel-body{
  padding: 13px 15px 0px 15px;
}
.thumbnail{
  margin: 2px 0px 16px 0px;
  padding: 10px;
  /*border-style: solid;*/
  /*border-width:2px;*/
  /*border-color: #adb5bd;*/
  border-radius: 5px;
}
.thumbnail:hover{
  box-shadow: 0px 0.5px 10px #888888;
}

.thumbnail .caption  {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  padding: 5px 9px 5px 9px;
}
.thumbnail .imgHeight{
  height: 200px;
}
/*弹窗文字*/
.info_span span{
  font-size: 20px;
}
.drawerfontclass{
  font-size: 16px;
  color: #1d2124;
}
</style>
